<template>
  <div class="login">
    <img class="login-img" src="@/assets/img/login-img.png" />
    <div class="login-form">
      <Tabs
        class="login-tabs"
        :data="tabsData"
        :active="clientType"
        @change="handleChange"
      />
      <Company v-if="clientType === 'company'" />
      <School v-if="clientType === 'school'" />
      <Student v-if="clientType === 'student'" />
    </div>
  </div>
</template>

<script>
import Tabs from './Tabs'
import Company from './Company'
import School from './School'
import Student from './Student'
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'Login',
  components: { Tabs, Company, School, Student },
  data() {
    return {
      tabsData: [
        { id: 'company', name: '企业登录' },
        { id: 'school', name: '学校登录' },
        { id: 'student', name: '学生登录' }
      ]
    }
  },
  computed: {
    ...mapState(['clientType'])
  },
  methods: {
    ...mapMutations({
      setClientType: 'setClientType'
    }),
    handleChange(data) {
      this.setClientType(data)
    }
  }
}
</script>

<style lang="scss">
@import 'styles/common.scss';
.login {
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .login-img {
    width: 8.69rem;
  }
  .login-form {
    width: 6.51rem;
    padding: 0.5rem 0.56rem 0.56rem;
    background: #ffffff;
    border-radius: 0.16rem;
    .login-tabs {
      margin-bottom: 0.5rem;
    }
    .login-form-btn {
      width: 100%;
      min-height: 40px;
      height: 0.6rem;
      border-radius: 0.6rem;
      font-size: 0.29rem;
    }
    .login-form-links {
      margin-top: 0.3rem;
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>
